<template>
  <div class="container">
    <Header :showRefresh="false" @refresh="() => {}">
      <template #leftTitle>
        <router-link :to="{ name: 'ServiceList' }" v-if="!isIrs"
          >服务管理</router-link
        >
        <router-link :to="{ name: 'IrsServiceList' }" v-if="isIrs"
          >IRS服务管理</router-link
        >
        <el-icon class="v-align-top"><arrow-right-bold /></el-icon>
      </template>
    </Header>
    <div class="page-main">
      <progress-bar :active="active" />
      <FirstStep v-if="active == 1" @callEdit="callEdit" />
      <SecoundStep v-if="active == 2" @callEdit="callEdit" />
      <ThirdStep v-if="active == 3" @callEdit="callEdit" />
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import ProgressBar from "./components/ProgressBar.vue";
import { ArrowRightBold } from "@element-plus/icons-vue";
import FirstStep from "./components/FirstStep.vue";
import SecoundStep from "./components/SecondStep.vue";
import ThirdStep from "./components/ThirdStep.vue";
import { reactive, ref, onMounted, defineComponent } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { detailService } from "@/api/service";
import { getDataSourcePageList } from "@/api/adaptation.js";
import { string2obj, string2Arr } from "@/utils/index.js";
export default defineComponent({
  components: {
    ArrowRightBold,
    ProgressBar,
    FirstStep,
    SecoundStep,
    ThirdStep,
    Header,
  },
  setup() {
    const store = useStore();
    const route = useRoute();
    const pageTitle = ref("");
    const url = location.href.toLocaleLowerCase();
    const isIrs = ref(url.indexOf("irs") > 0);
    const isEdit = url.indexOf("edit") > 0
    const getDetail = async (id, versionId) => {
      let res = await detailService(id, versionId);
      let data = res.data;
      data.ifParam = data.ifParam || {
        adptIfCfgHttp: {
          inParamsJson: { header: [], queryParam: [], body: [] },
        },
        adptIfCfgDb: { inParamsJson: [], sqlStmt: "" },
      };
      data.inParamsList = data.inParamsList || [{}];
      data.outParamsList = data.outParamsList || [];
      store.commit("app/PUT_SERVICE_ALL", data);
      // console.log("state：", store.state.app.serviceBody);
      // console.log(data);
    };
    const getDataSourceList = async () => {
      // 添加数据源列表
      let res = await getDataSourcePageList({ page: 1, size: 100 });
      store.commit("app/ADD_SRC_OPTION", res.data.list);
      // console.log("state：", store.state.app.scrOpitonList);
    };

    onMounted(() => {
      pageTitle.value = isEdit ? "编辑" : "新增";
      if (isEdit) {
        let { id, versionId } = route.query;
        getDetail(id, versionId);
      }
      getDataSourceList();
    });
    let active = ref(1);
    const callEdit = (value) => {
      active.value = value;
    };
    return { active, pageTitle, callEdit, isIrs };
  },
});
</script>

<style lang="scss" scoped></style>
<style></style>
